<template>
<div>
    <el-card style="width: 500px;margin: 0 auto;border: 1px">
        <h1 style="margin-left: 20px">医生注册</h1>
        <!--下方输入框-->
        <el-form :model="doctor" :rules="doctorRules" ref="doctor" label-width="" class="demo-ruleForm">
            <!--检测输入用户名-->
            <el-form-item style="width: 400px;margin-left: 30px" label="" prop="userName">
                <el-input  v-model="doctor.userName" placeholder="请输入用户名">
                    <template slot="prepend">
                        <i class="el-icon-user-solid"></i>
                    </template>
                </el-input>
            </el-form-item>

            <!--检测输入密码-->
            <el-form-item style="width: 400px;margin-left: 30px" label="" prop="password">
                <el-input type="password" v-model="doctor.password" placeholder="请输入密码">
                    <template slot="prepend">
                        <i class="el-icon-lock"></i>
                    </template>
                </el-input>
            </el-form-item>

            <!--检测输入验证密码-->
            <el-form-item style="width: 400px;margin-left: 30px" label="" prop="repassword">
                <el-input type="password" v-model="doctor.repassword" placeholder="请重新输入密码">
                    <template slot="prepend">
                        <i class="el-icon-lock"></i>
                    </template>
                </el-input>
            </el-form-item>

            <!--输入真实姓名-->
            <el-form-item style="width: 400px;margin-left: 30px" label="" prop="name">
                <el-input type="text" v-model="doctor.name" placeholder="请输入真实姓名">
                    <template slot="prepend">
                        <i class="el-icon-user"></i>
                    </template>
                </el-input>
            </el-form-item>

            <!--输入所属医院-->
            <el-form-item style="width: 400px;margin-left: 30px" label="" prop="hospital">
                <el-input type="text" v-model="doctor.hospital" placeholder="请输入所属医院">
                    <template slot="prepend">
                        <i class="el-icon-s-home"></i>
                    </template>
                </el-input>
            </el-form-item>

            <!--选择所属科室-->
            <el-form-item style="margin-left: 30px" label="" prop="department">
                <el-select style="width: 400px" v-model="doctor.department" placeholder="请选择所属科室">
                    <el-option v-for="item in departTitle" :label="item.depTitle" :value="item.id"></el-option>
                </el-select>
            </el-form-item>

            <!--输入职称-->
            <el-form-item style="width: 400px;margin-left: 30px" label="" prop="department">
                <el-input type="text" v-model="doctor.duty" placeholder="请输入职称">
                    <template slot="prepend">
                        <i class="el-icon-s-home"></i>
                    </template>
                </el-input>
            </el-form-item>

            <!--输入手机号-->
            <el-form-item style="width: 400px;margin-left: 30px" label="" prop="phone">
                <el-input type="text" v-model="doctor.phone" placeholder="请输入手机号">
                    <template slot="prepend">
                        <i class="el-icon-phone"></i>
                    </template>
                </el-input>
            </el-form-item>

            <el-form-item>
                <input type="checkbox" v-model="doctor.agreement" style="margin-left: 30px">
                <span style="font-size: 10px;color: #666666;left: 25px">我已阅读并接受丁香园 《用户协议》 《隐私政策》</span>
            </el-form-item>

            <el-form-item>
                <el-button style="width: 400px;margin-left: 30px" :disabled="!doctor.agreement" type="success" @click="submitDoctorForm('doctor')">立即创建</el-button>
            </el-form-item>
        </el-form>
        <div align="center">
            <br>
            <a href="/reg/user" style="text-decoration: none;color: #69bb55"><button class="switch" style="cursor: pointer">转到用户注册界面</button></a>
            <span style="text-align: center; margin-top: 50px;font: 12px '微软雅黑 Light';color: #79b769;display: block">
                        遇到问题，请关注微信公众号留言</span>
        </div>

    </el-card>
</div>
</template>

<script>
import qs from "qs";
import BaseUrl from "@/http/BaseUrl";
import SimpleAxios from "@/http/SimpleAxios";

export default {
    data(){
        return {
            radio: '1',
            doctor: {userName:"", password:"", name:"", repassword:"",
                agreement:false,hospital:"",department:"",duty:"",phone:""},
            doctorRules: {
                userName: [
                    { required: true, message: '请输入用户名', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur'  },
                    { min: 8, max: 16, message: '长度在 8 到 16 个字符', trigger: 'blur' },
                    { pattern: /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[@$!%*#?&])[^\s]{8,}$/, message: '密码必须位数字，字母，特殊符号的组合', trigger: 'blur' }
                ],
                repassword: [
                    { required: true, message: '请重新输入密码', trigger: 'blur' },
                    {
                        validator: this.validateUserRepassword,
                        trigger: "blur",
                    }
                ],
                name:[
                    { required: true, message: '请输入真实姓名', trigger: 'blur' }
                ],
                hospital: [
                    { required: true, message: '请输入所属医院', trigger: 'blur' }
                ],
                department: [
                    { required:true, message: '请选择所属科室', trigger: 'change' }
                ],
                phone: [
                    { required: true, message: '请输入手机号', trigger: 'blur' },
                    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的中国大陆11位手机号', trigger: 'blur' }
                ],
                duty: [
                    { required: true, message: '请输入手机号', trigger: 'blur' },
                    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的中国大陆11位手机号', trigger: 'blur' }
                ]
            },
            departTitle:[]
        }
    },
    methods: {
        submitDoctorForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    let url =BaseUrl.PASSPORT+ '/passport/doctors/reg';
                    console.log('url='+url);
                    // 只传递需要的属性
                    const requestData = {
                        userName: this.doctor.userName,
                        password: this.doctor.password,
                        name: this.doctor.name,
                        hospital:this.doctor.hospital,
                        department:this.doctor.department,
                        duty:this.doctor.duty,
                        phone:this.doctor.phone
                    };

                    const formData = qs.stringify(requestData);

                    this.axios.post(url,formData,{
                        headers:{
                            'Content-Type': 'application/x-www-form-urlencoded'
                        }
                    }).then((response)=>{
                        let jsonResult=response.data;
                        if(jsonResult.state===20000){
                            this.$message({
                                message:'注册成功',type:'success'
                            });

                            location.href="/login/user";
                        }else{
                            this.$message.error(response.data.message);
                        }
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        // 自定义校验规则，验证密码和确认密码是否一致
        validateUserRepassword(rule, value, callback) {
            if (value !== this.doctor.password) {
                callback(new Error("两次输入的密码不一致"));
            } else {
                callback();
            }
        },
    },
    created() {
        let depUrl=BaseUrl.INDEX+'/encyclopedia/encList/departments';

        this.axios.get(depUrl).then((response)=>{
            let jsonResult=response.data;
            if (jsonResult.state===20000){
                this.departTitle=response.data.data;
            }
        })
    },
    mounted() {

    }
}
</script>
<style>
body{
    margin: 0 auto;
}
h1{
    margin-left: 20px;
    font: 24px -apple-system;
    color: #333333;
    line-height: 40px;
}
.switch{
    color: #69bb55;
    font: 12px "微软雅黑 Light";
    text-decoration: none;
    display: block;
    height: 35px;
    border: 1px solid #69bb55;
    background-color: transparent;
    border-radius: 10px;
}

</style>